<template>
  <div class="paper-preview">
    <div class="preview-header">
      <h2>试卷预览</h2>
      <div class="header-actions">
        <el-button @click="printPaper">
          <el-icon><Printer /></el-icon>
          打印试卷
        </el-button>
        <el-button @click="downloadPaper" type="primary">
          <el-icon><Download /></el-icon>
          下载试卷
        </el-button>
        <el-button @click="editPaper">
          <el-icon><Edit /></el-icon>
          编辑试卷
        </el-button>
      </div>
    </div>

    <!-- 试卷信息 -->
    <el-card class="info-card">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="试卷标题">{{ paperInfo.title }}</el-descriptions-item>
        <el-descriptions-item label="考试科目">{{ paperInfo.subject }}</el-descriptions-item>
        <el-descriptions-item label="总分">{{ paperInfo.totalScore }}分</el-descriptions-item>
        <el-descriptions-item label="时长">{{ paperInfo.duration }}分钟</el-descriptions-item>
        <el-descriptions-item label="题目数量">{{ paperInfo.questionCount }}题</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDateTime(paperInfo.createdAt) }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 试卷内容预览 -->
    <el-card class="paper-content-card">
      <template #header>
        <div class="paper-header">
          <h3>试卷内容</h3>
          <div class="preview-controls">
            <el-radio-group v-model="viewMode" size="small">
              <el-radio-button value="normal">普通视图</el-radio-button>
              <el-radio-button value="student">学生视图</el-radio-button>
              <el-radio-button value="teacher">教师视图</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </template>

      <div class="paper-content" id="paper-content">
        <!-- 试卷标题区域 -->
        <div class="paper-title-section">
          <h1 class="paper-title">{{ paperInfo.title }}</h1>
          <div class="paper-subtitle">
            <span>科目：{{ paperInfo.subject }}</span>
            <span>总分：{{ paperInfo.totalScore }}分</span>
            <span>时间：{{ paperInfo.duration }}分钟</span>
          </div>
        </div>

        <!-- 答题说明 -->
        <div class="instructions-section">
          <h3>答题说明</h3>
          <ol>
            <li>请考生按规定在答题卡上作答，在试卷上作答无效</li>
            <li>考试结束后，将本试卷和答题卡一并交回</li>
            <li>选择题用2B铅笔填涂，非选择题用黑色签字笔作答</li>
          </ol>
        </div>

        <!-- 题目内容 -->
        <div class="questions-section">
          <!-- 选择题 -->
          <div class="question-group">
            <h3>一、选择题（共20题，每题2分，共40分）</h3>
            <div v-for="(question, index) in choiceQuestions" :key="question.id" class="question-item">
              <div class="question-header">
                <span class="question-number">{{ index + 1 }}.</span>
                <span class="question-score">（{{ question.score }}分）</span>
              </div>
              <div class="question-content">{{ question.content }}</div>
              <div class="question-options">
                <div v-for="(option, optIndex) in question.options" :key="optIndex" class="option-item">
                  {{ String.fromCharCode(65 + optIndex) }}. {{ option }}
                </div>
              </div>
              <div v-if="viewMode === 'teacher'" class="question-answer">
                <strong>正确答案：</strong>{{ question.correctAnswer }}
              </div>
            </div>
          </div>

          <!-- 填空题 -->
          <div class="question-group">
            <h3>二、填空题（共10题，每题2分，共20分）</h3>
            <div v-for="(question, index) in fillQuestions" :key="question.id" class="question-item">
              <div class="question-header">
                <span class="question-number">{{ index + 1 }}.</span>
                <span class="question-score">（{{ question.score }}分）</span>
              </div>
              <div class="question-content">{{ question.content }}</div>
              <div v-if="viewMode === 'teacher'" class="question-answer">
                <strong>参考答案：</strong>{{ question.answer }}
              </div>
            </div>
          </div>

          <!-- 简答题 -->
          <div class="question-group">
            <h3>三、简答题（共5题，每题8分，共40分）</h3>
            <div v-for="(question, index) in essayQuestions" :key="question.id" class="question-item">
              <div class="question-header">
                <span class="question-number">{{ index + 1 }}.</span>
                <span class="question-score">（{{ question.score }}分）</span>
              </div>
              <div class="question-content">{{ question.content }}</div>
              <div v-if="viewMode === 'teacher'" class="question-answer">
                <strong>评分要点：</strong>
                <ul>
                  <li v-for="point in question.scoringPoints" :key="point">{{ point }}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- 试卷底部 -->
        <div class="paper-footer">
          <p>共 {{ paperInfo.questionCount }} 题 第 1 页</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Printer, Download, Edit } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 响应式数据
const viewMode = ref('normal')
const paperInfo = reactive({
  title: '2024年期中考试试卷',
  subject: '数学',
  totalScore: 100,
  duration: 120,
  questionCount: 35,
  createdAt: '2024-01-19T10:00:00Z'
})

const choiceQuestions = ref([
  {
    id: 1,
    content: '下列哪个数是质数？',
    options: ['4', '6', '7', '9'],
    correctAnswer: 'C',
    score: 2
  },
  {
    id: 2,
    content: '方程 x² - 4 = 0 的解是？',
    options: ['x = 2', 'x = -2', 'x = ±2', 'x = 0'],
    correctAnswer: 'C',
    score: 2
  }
])

const fillQuestions = ref([
  {
    id: 11,
    content: '函数 f(x) = 2x + 1 在 x = 3 时的值是______。',
    answer: '7',
    score: 2
  },
  {
    id: 12,
    content: '圆的周长公式是 C =______。',
    answer: '2πr',
    score: 2
  }
])

const essayQuestions = ref([
  {
    id: 21,
    content: '请简述勾股定理的内容及其应用。',
    score: 8,
    scoringPoints: [
      '正确表述勾股定理（3分）',
      '说明定理的条件（2分）',
      '举例说明应用（3分）'
    ]
  }
])

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  return new Date(dateTime).toLocaleString('zh-CN')
}

// 打印试卷
const printPaper = () => {
  window.print()
}

// 下载试卷
const downloadPaper = async () => {
  try {
    // TODO: 实现试卷下载功能
    ElMessage.success('试卷下载功能开发中')
  } catch (error) {
    console.error('下载试卷失败:', error)
    ElMessage.error('下载试卷失败')
  }
}

// 编辑试卷
const editPaper = () => {
  router.push('/exam-paper/paper-editor')
}

// 获取试卷数据
const fetchPaperData = async () => {
  try {
    const paperId = route.params.id
    // TODO: 实现获取试卷数据的API调用
    // const response = await examPaperApi.getExamPaper(paperId)
  } catch (error) {
    console.error('获取试卷数据失败:', error)
    ElMessage.error('获取试卷数据失败')
  }
}

onMounted(() => {
  fetchPaperData()
})
</script>

<style scoped lang="scss">
.paper-preview {
  padding: 20px;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    color: #303133;
  }
}

.info-card {
  margin-bottom: 20px;
}

.paper-content-card {
  .paper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      margin: 0;
      color: #303133;
    }
  }
}

.paper-content {
  background: white;
  padding: 40px;
  min-height: 800px;

  .paper-title-section {
    text-align: center;
    margin-bottom: 40px;

    .paper-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .paper-subtitle {
      display: flex;
      justify-content: center;
      gap: 40px;
      color: #606266;
      font-size: 16px;
    }
  }

  .instructions-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 4px;

    h3 {
      margin: 0 0 15px 0;
      color: #303133;
    }

    ol {
      margin: 0;
      padding-left: 20px;

      li {
        margin-bottom: 8px;
        color: #606266;
      }
    }
  }

  .questions-section {
    .question-group {
      margin-bottom: 40px;

      h3 {
        margin: 0 0 20px 0;
        font-size: 18px;
        font-weight: bold;
        color: #303133;
      }
    }

    .question-item {
      margin-bottom: 25px;

      .question-header {
        margin-bottom: 10px;

        .question-number {
          font-weight: bold;
          color: #303133;
        }

        .question-score {
          color: #909399;
          font-size: 14px;
        }
      }

      .question-content {
        margin-bottom: 15px;
        line-height: 1.6;
        color: #303133;
      }

      .question-options {
        margin-left: 20px;

        .option-item {
          margin-bottom: 8px;
          color: #606266;
        }
      }

      .question-answer {
        margin-top: 15px;
        padding: 10px;
        background: #f0f9ff;
        border-left: 4px solid #409eff;
        color: #303133;
      }
    }
  }

  .paper-footer {
    text-align: center;
    margin-top: 60px;
    color: #909399;
    font-size: 14px;
  }
}

// 打印样式
@media print {
  .paper-preview {
    padding: 0;
  }

  .preview-header,
  .info-card,
  .paper-header {
    display: none !important;
  }

  .paper-content {
    padding: 20px;
    box-shadow: none;
    border: none;
  }
}
</style>